<style lang="scss">

$border-radius: 10rpx;

.equity-introduce-type-item {
	width: 100%;
	background-color: #F7F5F4;
	border: 2rpx solid #BAA769;
	border-radius: $border-radius;
	overflow: hidden;
	box-sizing: border-box;
	padding-bottom: 23rpx;
	font-size: 0;
}

.equity-introduce-type-item-tag {
	height: 36rpx;
	line-height: 36rpx;
	border-bottom-right-radius: $border-radius;
	background-color: #C8C8C8;
	font-size: 22rpx;
	color: #F2F2F2;
	padding: 0 15rpx;
	display: inline-block;
}

.equity-introduce-type-item-title {
	height: 51rpx;
	line-height: 51rpx;
	font-size: 28rpx;
	color: #A2A2A2;
	text-align: center;
	margin-top: 10rpx;
}

.equity-introduce-type-item-price {
	text-align: center;
	color: #A38838;
	margin-top: 14rpx;
}

.equity-introduce-type-item-price-unit {
	font-size: 28rpx;
}

.equity-introduce-type-item-price-value {
	font-size: 48rpx;
}

.equity-introduce-type-item-price-term {
	font-size: 28rpx;
}

.equity-introduce-type-item-desc {
	font-size: 24rpx;
	margin-top: 4rpx;
	text-align: center;
	color:rgba(0,0,0, .3);
}

.equity-introduce-type-item-true {
	background-color: #F7E4AB;
}

.equity-introduce-type-item-true .equity-introduce-type-item-tag {
	color: #F2F2F2;
	background-color: #5E5040;
}

.equity-introduce-type-item-true .equity-introduce-type-item-title {
	background-color: #E1C265;
	color: #7C6E45;
}

</style>

<template>
	<view
		class="equity-introduce-type-item"
		:class="'equity-introduce-type-item-' + select"
		@click="onClick"
	>
		
		<!-- 标签 -->
		<view class="equity-introduce-type-item-tag ellipsis" v-text="tag"></view>

		<!-- 标题 -->
		<view class="equity-introduce-type-item-title ellipsis" v-text="title"></view>

		<!-- 价格 -->
		<view class="equity-introduce-type-item-price ellipsis">
			<text class="equity-introduce-type-item-price-unit">￥</text>
			<text class="equity-introduce-type-item-price-value" v-text="price"></text>
			<text class="equity-introduce-type-item-price-term">/年</text>
		</view>

		<!-- 描述 -->
		<view
			class="equity-introduce-type-item-desc ellipsis"
			:style="{textDecoration: descDecoration ? 'line-through' : 'none'}"
			v-text="desc"
		></view>

	</view>
</template>

<script>
export default {

	props: {

		select: {
			type: Boolean,
			default: false,
		},

		title: {
			type: String,
			required: true,
		},

		tag: {
			type: String,
			required: true,
		},

		price: {
			type: String,
			required: true,
		},

		desc: {
			type: String,
			required: true,
		},

		descDecoration: {
			type: false,
			default: true
		},

	},

	methods: {

		onClick() {
			this.$emit("click");
		}

	}

}
</script>